<template>
  <div>
    <el-carousel :interval="4000" arrow="always" height='550px'>
      <el-carousel-item v-for="item in data.images" :key="item">
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>


  <div>
    <div style="text-align: center;margin-top: 50px;">
      <div class="text-style">安全解决方</div>
    </div>
    <div
      style="display: flex; height: 240px;justify-content: space-between; margin-top: 100px;flex-wrap: wrap;align-items: center;">
      <div style="cursor: pointer;" @click="skip('软件成分分析')">
        <img style="height: 220px; width: 220px;" src="../../assets/image/pop/structure.png" alt="">
        <div class="tip">软件成分分析</div>
      </div>
      <div style="cursor: pointer;" @click="skip('运行时安全')">
        <img style="height: 220px; width: 220px;" src="../../assets/image/pop/run.png" alt="">
        <div class="tip">运行时安全</div>
      </div>
      <div style="cursor: pointer;" @click="skip('安全检测')">
        <img style="height: 220px; width: 220px;" src="../../assets/image/pop/detection.jpeg" alt="">
        <div class="tip">安全检测</div>
      </div>
      <div style="cursor: pointer;" @click="skip('代码规范')">
        <img style="height: 220px; width: 220px;" src="../../assets/image/pop/norm.jpg" alt="">
        <div class="tip">代码规范</div>
      </div>
    </div>


    <div style="margin-top: 150px;">
      <div style="text-align: center;">
        <div class="text-style">安全至关重要</div>
      </div>
      <div style="text-align: center;">
        <div class="safety_tip">
          开发的安全功能，是我们公司最宝贵的财富之一。它们不仅保护了我们的现在，更为我们的未来铺平了道路。在这个充满挑战和机遇的时代，有了这些安全功能的守护，我们的公司将能够无畏前行，开创更加辉煌的明天。</div>
      </div>
    </div>

    <div style="margin-top: 100px;">
      <el-row>
        <el-col span="12"> <img class="safety_image" src="../../assets/safety.jpg" alt=""></el-col>
        <el-col span="12" style="margin-left: 50px;">
          <div>
            <span class="safety_title">我们的开发者</span><br><br>
            <div class="safety_content">安全功能保护开发者编写的代码和应用程序不受恶意攻击，确保他们的工作成果安全,安全功能的实施为开发者提供了学习和掌握最新安全技术和最佳实践的机会。</div>
          </div>
          <div style="margin-top: 40px;">
            <span class="safety_title">运维</span><br><br>
            <div class="safety_content">安全功能的自动化减少了运维团队在安全问题上的工作量，使他们能够专注于其他关键任务。</div>
          </div>
          <div style="margin-top: 40px;">
            <span class="safety_title">团队</span><br><br>
            <div class="safety_content">安全功能保护公司的数字资产，防止数据泄露和损失,安全功能为公司的长期发展提供了坚实的基础，确保公司能够在不断变化的市场中保持竞争力。</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 150px;">
      <div style="text-align: center;">
        <div class="text-style">客户信任</div>
      </div>
      <div style="text-align: center;">
        <div class="safety_tip">
          通过确保数据安全和隐私保护，公司能够赢得客户的信任，提高客户满意度和忠诚度,强大的安全措施可以提升公司的品牌形象，展示公司对客户和合作伙伴的责任感。</div>
      </div>
    </div>

    <div style="margin-top: 100px;">
      <el-row>
        <el-col span="12"> <img class="safety_image" src="../../assets/safety_client.jpg" alt=""></el-col>
        <el-col span="12" style="margin-left: 50px;">
          <div>
            <span class="safety_title">我们的员工</span><br><br>
            <div class="safety_content">安全功能的实施和推广可以提高员工的安全意识，使他们成为公司安全防线的一部分。</div>
          </div>
          <div style="margin-top: 40px;">
            <span class="safety_title">市场机会</span><br><br>
            <div class="safety_content">在某些行业，安全功能可能成为进入市场的先决条件，或者成为公司获得新客户的关键因素。</div>
          </div>
          <div style="margin-top: 40px;">
            <span class="safety_title">成本效益</span><br><br>
            <div class="safety_content">虽然安全功能的实施可能需要初期投资，但长远来看，它可以减少因安全事件导致的损失，从而实现成本效益。</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 100px;"></div>

  </div>
</template>

<script setup>
import { reactive } from 'vue';
import safety01 from '@/assets/safety01.png'
import safety02 from '@/assets/safety02.png'
import safety03 from '@/assets/safety03.jpg'
import safety04 from '@/assets/safety04.webp'

const data = reactive({
  images: [safety01, safety02, safety03, safety04],
})

const skip = (text) => {
  if (text == '软件成分分析') {
    const url = `/safety_tip?topic=${text}`;
    window.open(url)
  } else if (text == '运行时安全') {
    const url = `/safety_tip?topic=${text}`;
    window.open(url)
  } else if (text == '安全检测') {
    const url = `/safety_tip?topic=${text}`;
    window.open(url)
  } else if (text == '代码规范') {
    const url = `/safety_tip?topic=${text}`;
    window.open(url)
  }else{

  }
}


</script>

<style scoped>
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-carousel__item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* 居中的文字 */
.text-style {
  text-align: center;
  font-family: 'Arial', sans-serif;
  font-size: 26px;
  color: #333;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
}

/* 提示文字 */
.tip {
  font-family: 'Times New Roman', serif;
  font-size: 18px;
  color: #555;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 15px;
  text-align: center;
}

.safety_tip {
  text-align: center;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  margin-top: 20px;
  color: #333;
  background-color: #f0f0f0;
  border-radius: 12px;
}

.safety_image {
  border-radius: 14px;
}

.safety_title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #1b1b1b;
  margin-bottom: 10px;
}

.safety_content {
  white-space: normal;
  width: 700px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}
</style>